import React, { useEffect } from 'react'
import { useRootStore } from "../store"
import { observer } from "mobx-react"

function Users() {
    // 1、从根Store中获取子Store
    const { userListStore } = useRootStore()
    const { users = [], loadData } = userListStore

    // 如果想用服务端渲染就放到Store里面调用
    // 如果想用客户端渲染去做异步Mobx请求就这样用
    // useEffect(() => {
    //     loadData()
    // }, [])

    return (
        <ul>
            {users.map((user, index) => (
                <li key={user.name + index}>
                    {user.name}: {user.age}
                </li>)
            )}
        </ul>
    )
}

// 2、observer包裹组件
export default observer(Users)
